<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <script>
      /*
        某些组件被执行了某些操作后，触发某些代码的执行
        事件；某些操作 如单击、双击、按下键盘、鼠标移动...
        事件源： 组件 如按钮 文本输入框...
        监听器： 代码  
        注册监听: 将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码
        */
      /*
        常见的事件
        1、点击事件     onclick单击事件  ondblclick双击事件
        2、焦点事件     onblur失去焦点   onfocus元素获得焦点   一般用于表单校验
        3、加载事件     onload  页面或者图片加载完成
        4、鼠标事件     onmousedown  onmouseup   onmousemove onmouseover  onmouseout
        5、键盘事件     onkeydown    onkeyup   oonkeyperss
        6、选中和改变   onchange     onselect
        7、表单事件     onsubmit    onreset  可以阻止表单提交
        */
    </script>
  </head>
  <body>
    <form action="#" id="form">
      <input type="text" id="username" />
      <select name="" id="city">
        <option value="">请选择</option>
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">成都</option>
        <input type="submit" value="提交" />
      </select>
    </form>
    <script>
      var test = document.getElementById("username");
      test.onblur = function() {
        //  alert("lost")
      };
      test.onmouseover = function() {
        //  alert("over")
      };
      test.onmousedown = function() {
        //  alert("down")
      };
      test.onkeydown = function(event) {
        //  alert(event.keyCode)
      };
      test.onchange = function() {
        //  alert("change")
      };
      var city = document.getElementById("city");
      city.onchange = function() {
        alert("change");
      };
      var form = document.getElementById("form");
      form.onsubmit = function() {
        // 检验用户名格式是否正确
        var flag = false;
        return flag;
      };
    </script>
  </body>
</html>
